<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./imgNew_1.css" />
    <script src="./jquery-1.12.4.js"></script>
    <script src="./imgNew_1.js"></script>
    <title>Document</title>
    <style>
      .parentbox,
      .parentbox2 {
        width: 670px;
        height: 300px;
        border: 2px solid red;
      }
    </style>
  </head>

  <body>
    <div class="parentbox">
      <div class="newimg1-container">
        <div class="slide-item">
          <div class="item-left">
            <img src="./articleImg/image1.jpg" alt="Slide 1" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题1</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="slide-item">
          <div class="item-left">
            <img src="./articleImg/image2.jpg" alt="Slide 2" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题2</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="slide-item">
          <div class="item-left">
            <img src="./articleImg/image3.jpg" alt="Slide 3" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题3</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="slide-item active">
          <div class="item-left">
            <img src="./articleImg/image4.jpg" alt="Slide 4" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题4</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="slide-item">
          <div class="item-left">
            <img src="./articleImg/image5.jpg" alt="Slide 5" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题5</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="slide-item">
          <div class="item-left">
            <img src="./articleImg/image6.jpg" alt="Slide 6" />
          </div>
          <div class="item-tight">
            <div class="header">Caption 标题6</div>
            <hr color="#0c8a7f" />
            <div class="article_body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?</div>
          </div>
        </div>
        <div class="dots-container">
          <a href="http://" class="more">更多</a>
          <div class="dots">
            <img src="./img/dh_bg.gif" alt="" class="dh_bg" />
            <span class="dot-item" data-slide="1">
              <img src="./img/1-2.gif" alt="" />
            </span>
            <span class="dot-item" data-slide="2">
              <img src="./img/2-2.gif" alt="" />
            </span>
            <span class="dot-item" data-slide="3">
              <img src="./img/3-2.gif" alt="" />
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="parentbox2"></div>
    <script>
      var options = []
      for (var index = 0; index < 6; index++) {
        var o = {
          header: '标题' + (index + 1),
          author: '作者' + (index + 1),
          aritcleImg: './articleImg/image' + (index + 1) + '.jpg',
          gif: './img/' + (index + 1) + '-2.gif',
          body: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis excepturi pariatur quasi commodi harum numquam ullam sint modi dolor asperiores quisquam necessitatibus assumenda cupiditate, distinctio tempore nulla dolorum dolores illo?'
        }
        options.push(o)
      }
      // function buildDom(options) {
      //   // console.log($('.'+className))
      //   // console.log($(this));
      //   $('.' + 'parentbox2').append('<div class="newimg2-container"></div>')
      //   var ele = ''
      //   for (var index = 0; index < options.length; index++) {
      //     ele = `<div class="slide-item"><div class="item-left">
      //         <img src="${options[index].aritcleImg}" alt="Slide ${index + 1}" />
      //       </div><div class="item-tight">
      //         <div class="header">Caption ${options[index].header}</div>
      //         <hr color="#0c8a7f" />
      //         <div class="article_body">
      //           ${options[index].body}
      //         </div>
      //       </div>`
      //     $('.' + 'parentbox2' + ' .newimg2-container').append(ele)
      //   }
      //   var operations = '<div class="dots-container"><a href="http://"  class="more">更多</a><div class="dots"></div></div>'
      //   $('.' + 'parentbox2' + ' .newimg2-container').append(operations)
      //   var bg = '<div class="bg"></div>'
      //   $('.' + 'parentbox2' + ' .newimg2-container .dots').append(bg)
      //   for (var index = 0; index < options.length; index++) {
      //     var dotItem = `<span class="dot-item" data-slide="${index + 1}">
      //           <img src="${options[index].gif}" alt="" />
      //         </span>`

      //     $('.' + 'parentbox2' + ' .newimg2-container .dots').append(dotItem)
      //   }
      // }
      function buildDom(options) {
        // console.log($('.'+className))
        // console.log($(this));
        $('.' + 'parentbox2').append('<div class="newimg1-container"></div>')
        var ele = ''
        for (var index = 0; index < options.length; index++) {
          ele =
            '<div class="slide-item"><div class="item-left">\n            <img src="' +
            options[index].aritcleImg +
            '" alt="Slide ' +
            (index + 1) +
            '" />\n          </div><div class="item-tight">\n            <div class="header">Caption ' +
            options[index].header +
            '</div>\n            <hr color="#0c8a7f" />\n            <div class="article_body">\n              ' +
            options[index].body +
            '\n            </div>\n          </div>'
          $('.' + 'parentbox2' + ' .newimg1-container').append(ele)
        }
        var operations = '<div class="dots-container"><a href="http://"  class="more">更多</a><div class="dots"></div></div>'
        $('.' + 'parentbox2' + ' .newimg1-container').append(operations)
        var bg = '<img src="./img/dh_bg.gif" alt="" class="dh_bg" />'
        $('.' + 'parentbox2' + ' .newimg1-container .dots').append(bg)
        for (var index = 0; index < options.length; index++) {
          var dotItem = '<span class="dot-item" data-slide="' + (index + 1) + '">\n              <img src="' + options[index].gif + '" alt="" />\n            </span>'
          $('.' + 'parentbox2' + ' .newimg1-container .dots').append(dotItem)
        }
        newImg1('parentbox2')
      }
      function bg(className) {
        return
        // console.log($('.' + className + ' .newimg2-container .dots')[0].clientWidth)
        $('.' + className + ' .newimg1-container .dots .bg').css({ right: $('.' + className + ' .newimg1-container .dots')[0].clientWidth + 'px' })
      }
      buildDom(options)
      // bg('parentbox2')
      // bg('parentbox')

      newImg1('parentbox')
    </script>
  </body>
</html>
